<div layout="column" ng-cloak layout-fill class="settings-status-frame">

    <div class="settings-status-view" layout="row" layout-align="center start" flex>

        <md-content flex layout="column" layout-align="start center" class="status-card-small">
            <form name="vm.passwordForm" novalidate ng-submit="vm.submit()">

                <div layout="column" layout-align="center stretch" layout-margin>
                    <md-card>
                        <md-card-title>
                            <md-toolbar>
                                <div class="md-toolbar-tools"
                                     layout="row"
                                     md-scroll-shrink>
                                    <div>
                                        <h2>{{ 'ADMINCONSOLE.LOGIN.CARD.TITLE' | translate }}</h2>
                                    </div>
                                </div>
                            </md-toolbar>
                            <!--<md-card-title-text>-->
                            <!--</md-card-title-text>-->
                        </md-card-title>
                        <md-card-content>

                            <div layout="column" layout-align="center start">
                                 <div layout="row" layout-align="start center" style="width: 100%;">
                                    <md-input-container md-theme="eBlockerThemeInput" style="width: 100%;">
                                        <label>{{ 'ADMINCONSOLE.LOGIN.CARD.INPUT.LABEL' | translate }}</label>
                                        <input name="adminPassword" ng-model="vm.adminPassword" type="password" ng-maxlength="vm.maxLength" required>
                                        <div ng-messages="vm.passwordForm.adminPassword.$error" ng-if="vm.passwordForm.$submitted || vm.passwordForm.adminPassword.$touched">
                                            <div ng-message="required">{{ 'ADMINCONSOLE.LOGIN.CARD.ERROR.PASSWORD_REQUIRED' | translate }}</div>
                                            <div ng-message="backend">{{ 'ADMINCONSOLE.LOGIN.CARD.ERROR.' + vm.backendErrorKey | translate }}</div>
                                            <div ng-message="maxlength">{{ 'ADMINCONSOLE.LOGIN.CARD.ERROR.PASSWORD_TOO_LONG' | translate }}</div>
                                        </div>
                                    </md-input-container>
                                </div>
                            </div>
                        </md-card-content>

                        <md-card-actions layout-gt-xs="row" layout="column" layout-align="center center" layout-margin>
                            <div>
                                <md-button type="button" class="md-primary" ng-click="vm.goToResetPassword()">{{ 'ADMINCONSOLE.LOGIN.CARD.ACTION.RESET' | translate }}</md-button>
                            </div>
                            <div>
                                <md-button type="submit" class="md-raised md-primary md-accent"
                                           ng-disabled="vm.secondsTillLogin > 0">
                                    {{ 'ADMINCONSOLE.LOGIN.CARD.ACTION.SUBMIT_COUNTDOWN' | translate :{sec: vm.secondsTillLogin}:"messageformat"}}
                                </md-button>
                            </div>
                        </md-card-actions>
                    </md-card>
                </div>
            </form>
        </md-content>
    </div>
</div>
